<template>

  <div class="ma">
    <div class="node" v-has="{action: 'iot:site:list', effect: 'move'}">
    <div class="search_box topSelect">
      <span class="iconfont icon-heimingdan "></span>
       <SearchInput
        placeholder="车位号"
        label="车位号"
        style="margin-right:20px"
        :value="searchs.park"
        :onChange="(val) => changeSearch('park',val)"
      />
       <SearchInput
        placeholder="请输入"
        label="充电桩编号"
        style="margin-right:20px"
        :value="searchs.sn"
        :onChange="(val) => changeSearch('sn',val)"
      />
      <div class="selectBox">
        <label>审核状态：</label>
        <el-select
          v-model="searchs.isCheck"
          clearable
          placeholder="请选择"
        >
          <el-option label="已审核" :value="true"></el-option>
          <el-option label="未审核" :value="false"></el-option>
        </el-select>
      </div>
     
       <div class="selectBox">
            <label>请选择：</label>
            <el-select v-model="searchs.site" clearable filterable @change="changeSite(1)" placeholder="站点">
              <el-option
                v-for="item in siteList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <el-select v-model="searchs.pile" clearable filterable  @change="changeSear()" placeholder="选择桩">
              <el-option
                v-for="item in pileList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
       </div>
      <div class="selectBox">
        <el-button size="small" plain icon="el-icon-search" @click="getIotSite">查询</el-button>        
      </div>
    </div>
    <Panel title="反向充电枪" :intro="intro">
    <TableEncapsulation
       slot="body"
      :tableConfig="tableConfig"
      :tableData="tableData"
    >
    <template slot="operation" slot-scope="operation">
          <el-button
             size="mini" icon="el-icon-edit"
            v-if="!operation.row.isCheck"
            v-has="{action: 'iot:site:update', effect: 'move'}"
            @click="()=>editStore(operation.row.id)"
          >审核</el-button>
        </template>
        <TablePager
          slot="pager"
          v-if="pager.use"
          :size="pager.size"
          :pageChange="pageChange"
          :show-total="pager.showTotal"
          :total="pager.total"
          :current="pager.current"
        >
          <span class="demonstration">GO></span>
        </TablePager>
    </TableEncapsulation>
    </Panel>
    </div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'iot:site:list', effect: 'noPremiss'}">
      <NoPremission />
    </div>

  </div>
</template>
<script>
import request from "@/tools/request";
import baseRequest from "@/tools/baseRequest";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
import ModalPanel from "@/components/ModalPanel";
import { objectFilter } from "@/tools/array";
import NoPremission from "@/components/NoPremission";
export default {
  name: "gunHlht",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput,
    ModalPanel,
    NoPremission
  },
  data() {
    return {
     info: {},
     deviceList:[],
     siteList: [],
     pileList: [],
      visible:false,
      intro:{
        title:'列表',
        content: ``
      },
      tableData: [],
      searchs: {
        component: 'iotList',
        isCheck:'',
        park: '',
        sn: '',
        site:'',
        pile: '',
      },
       pager: {
        component: 'iotList',
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      operation: true,
      ismOrpc: true,
      showTimes: 0,
      falseTimes: 0,
    };
  },
  created() {
     this.getIotSite();
    this.iotSite()
  },
  computed: {
    tableConfig () {
       return {
        selection: false,
        columnConfig: [
           {
            label: "ID",
            type: "text",
            prop: "id",
            align: "center",
            width:80
          },
          {
            label: "充电枪编号",
            type: "text",
            prop: "sn",
            align: "center",
            width:260
          },
          {
            label: "名称",
            type: "text",
            prop: "name",
            align: "center"
          },
          {
            label: "设备编码",
            type: "text",
            prop: "deviceSn",
            align: "center"
          },
          {
            label: "状态",
            type: "other",
            prop: "state",
            align: "center",
            fnc: val => val == 1 ? "空闲" : val == 2 ? "已连接" : val == 3 ? "充电中" : val == 4 ? "预约中": val == 5 ? "充电完成未断开":val == 6 ?"故障":'',
            class:val => val == 1 ? "sheng1" : val == 2 ? "agree" : val == 3 ? "agree" : val == 4 ? "agree": val == 5 ? "agree":val == 6 ?"denger-tag":'',
             width:120
          },
          {
            label: "在线状态",
            type: "other",
            prop: "online",
            align: "center",
            fnc: val => val == 1 ? "在线" : val == 2 ? "异常" :"离线",
            class:val => val == 1 ? "agree" : val == 2 ? "out-off" : "cancel" ,
            width:100
          },
          {
            label: "地锁状态",
            type: "other",
            prop: "floorLockState",
            align: "center",
            fnc: val => val == 0 ? "未知" : val == 1 ? "关闭":"打开",
            width:100
          },
          {
            label: "车位编号",
            type: "text",
            prop: "parkNo",
            align: "center"
          },
          {
            label: "车位状态",
            type: "other",
            prop: "parkState",
            align: "center",
            fnc: val => val == 1 ? "空闲" : val == 2 ? "占用" :"未知",
            width:100
          },
          {
            label: "异常信息",
            type: "text",
            prop: "errorMsg",
            align: "center"
          },
         {
            label: "是否审核",
            type: "other",
            prop: "isCheck",
            align: "center",
            fnc: val => val  ? "已审核" : "未审核",
            class:val => val  ? "agree" :"cancel" ,
            width:100
          },
          this.operation && {
            type: "operation",
            align: "center",
            label: "操作",
            width:180
          }
        ].filter(Boolean)
        }
    },
   
  },
  mounted(){
    // this.searchsFnc()
   
    
  },
  
  methods: {
   async changeSite(clear){
      let url = '/hlht/iot/pile/select'
      let datas = {siteId:this.searchs.site}
      const res = await request({
                      url,
                      method: "POST",
                      data:datas
                    })
      if(clear){
        this.searchs.pile = ''
      }
      this.pager.current = 1;
      this.pileList = res.list
      // this.getGun();
    },
    changeSear(){
      this.pager.current = 1
    },
           //站点
    async iotSite(){
      let { list } = await request({
      url: "/hlht/iot/site/select",
      method: "POST",
      data: {}
      });
       this.siteList = list
    },
   
    //获取列表
    async getIotSite() {
      let park = this.searchs.park
      let isCheck = this.searchs.isCheck
      let sn = this.searchs.sn
      let siteId = this.searchs.site
      let pileId = this.searchs.pile
      let page = this.pager.current
      let search = objectFilter({park, isCheck, page, siteId, sn, pileId})
      const res = await request({
        url: "/hlht/iot/pile/gun/list",
        method: "POST",
        data: search
      });
      this.tableData = res.page.list
      this.pager.total = res.page.totalCount
      this.pager.current = res.page.currPage
    },
    pageChange(val) {
      this.pager.current = val;
      this.getIotSite();
    },
    changeSearch(key, val) {
      this.searchs[key] = val;
      this.pager.current = 1;
    },
    
    async more(row){
      this.info = row
      this.visible = true
    },
    onCancel(){
      this.visible = false
    },
    async onSubmit(){
      this.$refs['configModal'].onSubmit()
    },
    
    async editStore(id){
     let res = await request({
          url: `/hlht/iot/pile/gun/check/${id}`,
          method: 'POST',
          // dataType: 'json',
          data:id
        })
         if(res.code !==0) return
         this.$message.success('审核完成')
         this.getIotSite();
    },
  
  }
}
</script>
<style lang='scss' >
.examine{
    display: flex;
    align-items: center;
    :global{
        div{
            color: #fff;
            padding: 10px;
            margin: 0 10px;
            border-radius: 2px;
            font-size: 14px;
            cursor: pointer;
            min-width: 60px;
            text-align: center;
        }
        .adopt{
                background: #409EFF;
        }
    }
}
.search_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
    color: #666666;

  :global {
    .el-input {
      width: 150px;
    }
    .el-select {
      .el-input {
        width: 90px;
      }
    }
    .el-input__icon {
      line-height: 27px;
    }
    .el-range-separator{
      line-height: 26px;
    }
  }
}

.topSelect {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}

.out-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 15px;
  color: #000000;
  padding: 10px 0;
}
.out-box1 {
  font-size: 15px;
  color: #000000;
  padding: 10px 0;
}
.sin-box {
  min-width: 33%;
  padding: 5px 0;
}
.hr-btn {
  margin: 5px auto;
}

</style>